<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video.js的使用</title>
    <link rel="stylesheet" href="./modelCss/video-js.min.css">
    <script src="./js/video.min.js"></script>
</head>

<body>
    <!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
    <video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>
    <br>
    <button class="control" onclick=operation('play')>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("volumeUp")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
    <button class="control" onclick=cut("CCTV1")>CCTV1高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("CCTV3")>CCTV3高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("CCTV6")>CCTV6高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("湖南卫视")>湖南卫视 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("CCTV15")>测试 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("XHWS")>香港卫视</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("MGZW")>美国中文电视</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=cut("ocean")>海洋</button>&nbsp&nbsp&nbsp&nbsp&nbsp





    <script>
        var myPlayer = videojs(document.getElementById('myVideo'), {
            controls: true, // 是否显示底部控制栏
            poster: 'images/2.jpg', // 视频封面图地址,视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
            // width: 300, //视频播放器显示的宽度
            // height: 300, //视频播放器显示的高度
            loop: false, //是否循环播放:true/false
            preload: 'auto',//建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)  
            //auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
            // metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
            //none
            autoplay: false, //自动播放
            fluid: true, // 自适应宽高,是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            notSupportedMessage: false, //是否允许重写默认的消息显示出来时，video.js无法播放媒体源
            plugins: {}, //插件
            techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
            inactivityTimeout: false,
            // aspectRatio: "1:1", //将播放器置于流体模式下，计算播放器动态大小时使用该值。该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
            controlBar: { // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否*/
                'currentTimeDisplay': true,
                'timeDivider': true,
                'durationDisplay': true, //总时间
                'remainingTimeDisplay': true, //当前播放时间
                volumePanel: {
                    inline: false,
                },
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [
                    { name: 'playToggle' }, // 播放按钮
                    { name: 'currentTimeDisplay' }, // 当前已播放时间
                    { name: 'progressControl' }, // 播放进度条
                    { name: 'durationDisplay' }, // 总时间
                    { // 倍数播放
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 2.5, 15,16]
                    },
                    {
                        name: 'volumePanel', // 音量控制
                        inline: false, // 不使用水平方式
                    },
                    { name: 'FullscreenToggle' } // 全屏
                ]
            },
            sources: [ // 视频源,资源文件等价于html中的形式source标签
                {
                    src: 'images/1.mp4',
                    type: 'video/mp4',
                    poster: 'images/2.jpg'
                }
            ]
        }, function onPlayerReady() {
            var myPlayer = this;
            //在回调函数中，this代表当前播放器，
            //可以调用方法，也可以绑定事件。
            /**
             * 事件events    绑定事件用on    移除事件用off
             */
            this.on('suspend', function () {//延迟下载
                console.log("延迟下载")
            });
            this.on('loadstart', function () { //客户端开始请求数据
                console.log("客户端开始请求数据")
            });
            this.on('progress', function () {//客户端正在请求数据
                console.log("客户端正在请求数据")
            });
            this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
                console.log("客户端主动终止下载")
            });
            this.on('error', function () {//请求数据时遇到错误
                console.log("请求数据时遇到错误")
            });
            this.on('stalled', function () {//网速失速
                console.log("网速失速")
            });
            this.on('play', function () {//开始播放
                console.log("开始播放")
            });
            this.on('pause', function () {//暂停
                console.log("暂停")
            });
            this.on('loadedmetadata', function () {//成功获取资源长度
                console.log("成功获取资源长度")
            });
            this.on('loadeddata', function () {//渲染播放画面
                console.log("渲染播放画面")
            });
            this.on('waiting', function () {//等待数据，并非错误
                console.log("等待数据")
            });
            this.on('playing', function () {//开始回放
                console.log("开始回放")
            });
            this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
                console.log("可以播放，但中途可能因为加载而暂停")
            });
            this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
                console.log("可以播放，歌曲全部加载完毕")
            });
            this.on('seeking', function () { //寻找中
                console.log("寻找中")
            });
            this.on('seeked', function () {//寻找完毕
                console.log("寻找完毕")
            });
            this.on('timeupdate', function () {//播放时间改变
                console.log("播放时间改变")
            });
            this.on('ended', function () {//播放结束
                console.log("播放结束")
            });
            this.on('ratechange', function () {//播放速率改变
                console.log("播放速率改变")
            });
            this.on('durationchange', function () {//资源长度改变
                console.log("资源长度改变")
            });
            this.on('volumechange', function () {//音量改变
                console.log("音量改变")
            });
            this.on('enterFullScreen', function () {//全屏
                console.log("全屏")
            });
        });


        function operation(param) {
            console.log(param)
            if ("play" == param) {	//开始播放
                myPlayer.play();
                // playState();
            } else if ("stop" == param) {	//停止播放
                myPlayer.pause();
            } else if ("fastForward" == param) { //快进
                var whereYouAt = myPlayer.currentTime();
                myPlayer.currentTime(10 + whereYouAt);
            } else if ("reload" == param) {	//重新加载
                myPlayer.pause();
                myPlayer.load();
                myPlayer.play();
            } else if ("back" == param) {	//后退
                var whereYouAt = myPlayer.currentTime();
                myPlayer.currentTime(whereYouAt - 10);
            } else if ("fullScreen" == param) {	//全屏
                // myPlayer.enterFullScreen();
                myPlayer.isFullScreen = true;
            } else if ("exitFullScreen" == param) {	//退出全屏
                myPlayer.enterFullScreen();
            } else if ("volumeUp" == param) {	//音量加
                // 声音大小（0 - 1之间）
                var howLoudIsIt = myPlayer.volume();
                myPlayer.volume(howLoudIsIt + 0.1);
            } else if ("volumeDown" == param) {	//音量减
                var howLoudIsIt = myPlayer.volume();
                myPlayer.volume(howLoudIsIt - 0.1);
            } else if ("reset" == param) {	//重置，视频不会播放	
                myPlayer.reset();
            }
        }
        // 切换直播源
        function cut(channel) {
            myPlayer.reset();//重置
            if ("CCTV1" == channel) {	//CCTV1
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8");
                myPlayer.play();
            } else if ("CCTV3" == channel) {	//CCTV3
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8");
                myPlayer.play();
            } else if ("CCTV6" == channel) {	//CCTV6
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8");
                myPlayer.play();
            }else if ("CCTV15" == channel) {	//测试
                myPlayer.src({ type: "application/x-mpegURL", src: "http://45.126.83.51/uq2663/h/h09/01.m3u8" });
                myPlayer.load("http://45.126.83.51/uq2663/h/h09/01.m3u8");
                myPlayer.play();
            } else if ("湖南卫视" == channel) {	//湖南卫视
                myPlayer.src({ type: "rtmp/flv", src: "rtmp://58.200.131.2:1935/livetv/hunantv" });
                myPlayer.load("rtmp://58.200.131.2:1935/livetv/hunantv");
                myPlayer.play();
            } else if ("XHWS" == channel) {	//香港卫视
                myPlayer.src({ type: "rtmp/flv", src: "rtmp://live.hkstv.hk.lxdns.com/live/hks2" });
                myPlayer.load("rtmp://live.hkstv.hk.lxdns.com/live/hks2");
                myPlayer.play();
            } else if ("MGZW" == channel) {	//美国中文电视
                myPlayer.src({ type: "rtmp/flv", src: "rtmp://media3.sinovision.net:1935/live/livestream" });
                myPlayer.load("rtmp://media3.sinovision.net:1935/live/livestream");
                myPlayer.play();
            } else if ("ocean" == channel) {	//官方案例
                myPlayer.src({ type: "video/mp4", src: "http://vjs.zencdn.net/v/oceans.mp4" });
                myPlayer.load("http://vjs.zencdn.net/v/oceans.mp4");
                myPlayer.play();
            }
        }









        /*
        controlBar组件的说明:
            playToggle, //播放暂停按钮
            volumeMenuButton, //音量控制
            currentTimeDisplay, //当前播放时间
            timeDivider,  // '/' 分隔符
            durationDisplay,  //总时间
            progressControl, //点播流时，播放进度条，seek控制
            liveDisplay, //直播流时，显示LIVE
            remainingTimeDisplay, //当前播放时间
            playbackRateMenuButton, //播放速率，当前只有html5模式下才支持设置播放速率
            fullscreenToggle //全屏控制
        */

        // 常用事件
        /*
        this.on('suspend', function () {//延迟下载
            console.log("延迟下载")
        });
        this.on('loadstart', function () { //客户端开始请求数据
            console.log("客户端开始请求数据")
        });
        this.on('progress', function () {//客户端正在请求数据
            console.log("客户端正在请求数据")
        });
        this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
            console.log("客户端主动终止下载")
        });
        this.on('error', function () {//请求数据时遇到错误
            console.log("请求数据时遇到错误")
        });
        this.on('stalled', function () {//网速失速
            console.log("网速失速")
        });
        this.on('play', function () {//开始播放
            console.log("开始播放")
        });
        this.on('pause', function () {//暂停
            console.log("暂停")
        });
        this.on('loadedmetadata', function () {//成功获取资源长度
            console.log("成功获取资源长度")
        });
        this.on('loadeddata', function () {//渲染播放画面
            console.log("渲染播放画面")
        });
        this.on('waiting', function () {//等待数据，并非错误
            console.log("等待数据")
        });
        this.on('playing', function () {//开始回放
            console.log("开始回放")
        });
        this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
            console.log("可以播放，但中途可能因为加载而暂停")
        });
        this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
            console.log("可以播放，歌曲全部加载完毕")
        });
        this.on('seeking', function () { //寻找中
            console.log("寻找中")
        });
        this.on('seeked', function () {//寻找完毕
            console.log("寻找完毕")
        });
        this.on('timeupdate', function () {//播放时间改变
            console.log("播放时间改变")
        });
        this.on('ended', function () {//播放结束
            console.log("播放结束")
        });
        this.on('ratechange', function () {//播放速率改变
            console.log("播放速率改变")
        });
        this.on('durationchange', function () {//资源长度改变
            console.log("资源长度改变")
        });
        this.on('volumechange', function () {//音量改变
            console.log("音量改变")
        });
        */



        // 常用方法
        /*
        播放：myPlayer.play();
        暂停：myPlayer.pause();
        获取播放进度：var whereYouAt = myPlayer.currentTime();
        设置播放进度：myPlayer.currentTime(120);
        视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效: var howLongIsThis = myPlayer.duration();
        缓冲，就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered();
        百分比的缓冲: var howMuchIsDownloaded = myPlayer.bufferedPercent();
        声音大小（0-1之间）: var howLoudIsIt = myPlayer.volume();
        设置声音大小: myPlayer.volume(0.5);
        取得视频的宽度: var howWideIsIt = myPlayer.width();
        设置宽度：myPlayer.width(640);
        获取高度: var howTallIsIt = myPlayer.height();
        设置高度：: myPlayer.height(480);
        一步到位的设置大小：myPlayer.size(640,480);
        全屏: myPlayer.enterFullScreen();
        离开全屏 : myPlayer.enterFullScreen();
        (4)、网络状态

        myPlayer.currentSrc; //返回当前资源的URL
        myPlayer.src = value; //返回或设置当前资源的URL
        myPlayer.canPlayType(type); //是否能播放某种格式的资源
        myPlayer.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
        myPlayer.load(); //重新加载src指定的资源
        myPlayer.buffered; //返回已缓冲区域，TimeRanges
        myPlayer.preload; //none:不预载 metadata:预载资源信息 auto:立即加载视频
        (5)、播放状态

        myPlayer.currentTime = value; //当前播放的位置，赋值可改变位置
        myPlayer.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
        myPlayer.duration; //当前资源长度 流返回无限
        myPlayer.paused; //是否暂停
        myPlayer.defaultPlaybackRate = value;//默认的回放速度，可以设置
        myPlayer.playbackRate = value;//当前播放速度，设置后马上改变
        myPlayer.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
        myPlayer.seekable; //返回可以seek的区域 TimeRanges
        myPlayer.ended; //是否结束
        myPlayer.autoPlay; //是否自动播放
        myPlayer.loop; //是否循环播放
        (6)、视频控制

        myPlayer.controls;//是否有默认控制条
        myPlayer.volume = value; //音量
        myPlayer.muted = value; //静音
        TimeRanges(区域)对象
        TimeRanges.length; //区域段数
        TimeRanges.start(index) //第index段区域的开始位置
        TimeRanges.end(index) //第index段区域的结束位置
 */
    </script>


</body>

</html>